<template>
    <div id="login">
        <div class="container">
            <img src="../images/logo_index.e0892259.png" class="user-avatar">
            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm ">
                <el-form-item label="" prop="pass">
                    <el-input  placeholder="请输入手机号" v-model="ruleForm2.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="checkPass" class="clearfix yanzhengma ">
                    <el-input  placeholder="请输入验证码" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
                    <el-button type="default" class="is-plain" @click="submitForm('ruleForm2')">发送验证码</el-button>
                </el-form-item>
                <div  class="allow">
                    <div  id="myCode"></div>
                        <label role="checkbox" aria-checked="true" class="el-checkbox is-checked">
                            <span aria-checked="mixed" class="el-checkbox__input is-checked">
                                <span class="el-checkbox__inner"></span>
                                    <input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="">
                            </span>
                        </label>我已阅读并同意
                        <a href="">用户协议</a>和
                        <a href="">隐私条款</a>
                </div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    
</template>

<script>
export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
          callback()
        }
      };
      var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入验证码'));
            } else {
            callback()
            }
      };
      return {
        ruleForm2: {
          pass: '13900000000',
          checkPass: '246810',
          loginHide:false,
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        },
        userInfo:{
          id:null,
          name:null,
          photo:null,
          refresh_token:null,
          token:null,
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // setTimeout(()=>{
            //     this.loginHide = true;
            //     this.$store.commit('updateLoginHide', this.loginHide);
            //     this.$router.push('/home');
            // },1000)
            this.axios.post('/itcast/mp/v1_0/authorizations',{
                mobile:this.ruleForm2.pass,
                code:this.ruleForm2.checkPass
            }).then((data)=>{
                this.userInfo = {
                  id:data.data.data.id,
                  name:data.data.data.name,
                  photo:data.data.data.photo,
                  refresh_token:data.data.data.refresh_token,
                  token:data.data.data.token,
                }
                this.loginHide = true;
                this.$store.commit('updateLoginHide', this.loginHide);
                this.$store.commit('updateuserInfo', this.userInfo);
                this.$router.push('/home');
            })
            
          } else {
              if(!this.ruleForm2.pass){
                this.$message({
                    message: '请输入手机号',
                    type: 'warning'
                });
              }else if(!this.ruleForm2.checkPass){
                this.$message({
                    message: '请输入验证码',
                    type: 'warning'
                });
              }
            return false;
          }
        });
      }
    },
  
  }
</script>
<style lang='less' scoped>
    #login{
        background-image: url(../images/login_bg.ec9bf219.jpg);
        background-size: cover;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .container{
            background-color: #fff;
            width: 30%;
            padding: 30px 0;
            img{
                    width: 40%;
            }
            .el-form{
                padding: 25px 40px 0;
                .el-form-item{
                    .el-form-item__content{
                        button{
                            width: 100%;
                        }
                        .is-plain{
                            width: 35%;
                            float: right;
                        }
                    }
                }
                .yanzhengma{
                    .el-input{
                            width: 60%;
                            float: left;
                    }
                }
                .allow{
                    text-align: left;
                    font-size: 14px;
                    margin-bottom: 20px;
                    color: #999;
                    a{
                        color: #3296fa;
                    }
                    .el-checkbox{
                        margin-right: 10px;
                    }
                }
            }
        }
        
    }
    
</style>